<template>
  <h2>我的收藏</h2>
  <el-card v-for="doctor in doctors" :key="doctor.doctorId" class="cake-card">
    {{ doctor.scId }}
    {{ doctor.doctorName }}
    <el-button type="danger" plain @click="cancelCollect(doctor.scId)">取消收藏</el-button>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getCollectDoctor, cancelCollectDoctor } from '@/request/ClientApi'
import { ElMessage } from "element-plus";

interface Doctor {
  scId: number
  doctorId: number
  doctorName: string
  doctorPhoto: string
  authLv: number
  doctorInfo: string
  doctorGender: boolean
  doctorAge: string
  departmentId: number
}

const doctors = ref<Doctor[]>([])

const loading = ref(false);

const cancelCollect = async (scId: number) => {
  if (loading.value) return;
  loading.value = true;

  try {
    await cancelCollectDoctor(scId);
    doctors.value = doctors.value.filter(doctor => doctor.scId !== scId);
    // ElMessage.success('取消收藏成功');
  } catch (err) {
    console.error('取消收藏失败:', err);
    ElMessage.error('取消收藏失败');
  } finally {
    loading.value = false;
  }
};


// 获取收藏医生列表
// 修改获取数据的代码
onMounted(() => {
  getCollectDoctor().then((res: any) => {
    doctors.value = res.filter(doctor => doctor.doctorId !== null) // 过滤掉null值
  })
})
</script>


<style scoped>
.cake-card {
  background-color: #ffc0cb; /* 浅粉色背景 */
  border: 1px solid #ff69b4; /* 粉色边框 */
  border-radius: 15px; /* 圆润的边角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  margin-bottom: 15px; /* 卡片之间的间距 */
  padding: 20px; /* 内边距 */
  transition: transform 0.2s; /* 添加过渡效果 */
}

.cake-card:hover {
  transform: scale(1.05); /* 鼠标悬停时稍微放大 */
}
</style>